<script lang="ts" setup>
  // 接收父组件传递过来的参数
  defineProps({
    // href属性值的前缀
    prefix: {
      type: String,
      default: '#icon-' // 默认值,前缀
    },
    // 图标名称
    name: {
      type: String,
      required: true // 必填项
    },
    // 图标颜色
    color: {
      type: String,
      default: '' // 默认值
    },
    // 图标大小
    width: {
      type: [Number, String],
      default: '16px' // 默认值
    },
    height: {
      type: [Number, String],
      default: '16px' // 默认值
    }
  })
</script>
<template>
  <!-- 测试svg图标的使用 -->
  <svg>
    <use :href="prefix + name" :fill="color" :style="{ width: typeof width === 'number' ? `${width}px` : width, height: typeof height === 'number' ? `${height}px` : height }"></use>
  </svg>
</template>
<style scoped></style>
